<template>
  <el-card>
    <template #header>
      <div>瀑布流页面</div>
    </template>
    <Waterfall ref="waterfallRef" :list="list">
      <template #item="{ item }">
        <div class="card">
          <LazyImg :url="item.url" />
          <p class="text">{{ item.title }}</p>
        </div>
      </template>
    </Waterfall>
  </el-card>
</template>

<script setup>
  import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
  import "vue-waterfall-plugin-next/dist/style.css";

  import RedBookJson from "./components/redBook.json";

  const waterfallRef = ref();
  const list = ref();

  onMounted(async () => {
    list.value = await RedBookJson.data.items.map((item) => {
      return {
        id: item.id,
        url: item.note_card.cover.url_pre,
        width: item.note_card.cover.width,
        height: item.note_card.cover.width,
        title: item.note_card.display_title,
      };
    });
  });
</script>

<style lang="scss" scoped></style>
